<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户注册 - 智能小区系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        /* 添加 hidden 类定义 */
        .hidden {
            display: none;
        }

        /* 其他样式保持不变 */
        :root {
            --primary-color: #4361ee;
            --secondary-color: #3a0ca3;
            --accent-color: #7209b7;
            --light-color: #f8f9fa;
            --success-color: #2ecc71;
            --error-color: #e74c3c;
            --warning-color: #f39c12;
            --shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
            --transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(135deg, #4361ee, #3a0ca3);
            background-attachment: fixed;
            padding: 20px;
        }

        .register-card {
            position: relative;
            width: 100%;
            max-width: 480px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow);
            transform: translateY(0);
            transition: var(--transition);
            animation: cardEntrance 0.6s ease-out;
        }

        .register-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .card-header {
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
            color: white;
            padding: 30px 20px 35px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .card-header h1 {
            font-size: 2.2rem;
            font-weight: 600;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 2;
        }

        .card-header p {
            font-size: 1rem;
            opacity: 0.9;
            max-width: 350px;
            margin: 0 auto;
            position: relative;
            z-index: 2;
        }

        .card-header::before,
        .card-header::after {
            content: "";
            position: absolute;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .card-header::before {
            top: -40px;
            left: -40px;
        }

        .card-header::after {
            bottom: -60px;
            right: -60px;
        }

        .card-body {
            padding: 30px 30px 20px;
        }

        .input-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        @media (min-width: 480px) {
            .input-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .input-grid .item.full-width {
                grid-column: span 2;
            }
        }

        .input-group {
            position: relative;
            transition: var(--transition);
        }
        .input-group {
            position: relative;
            transition: var(--transition);
        }

        .input-group.focused {
            transform: translateY(-3px);
        }

        .input-group.email-check {
            margin-bottom: 20px;
        }

        .input-group i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: #777;
            transition: var(--transition);
            z-index: 2;
        }
        .input-group i1 {
            position: absolute;
            left: 15px;
            top: 37%;
            transform: translateY(-50%);
            font-size: 1.1rem;
            color: #777;
            transition: var(--transition);
            z-index: 2;
        }

        .input-group input {
            width: 100%;
            height: 56px;
            padding: 0 20px 0 48px;
            font-size: 1rem;
            border-radius: 12px;
            border: 2px solid #e0e0e0;
            background: #f9f9f9;
            transition: var(--transition);
            outline: none;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
            position: relative;
            z-index: 1;
        }

        .input-group input:focus {
            border-color: var(--primary-color);
            background: white;
            box-shadow: 0 5px 15px rgba(67, 97, 238, 0.2);
        }

        .input-group input:focus + i {
            color: var(--primary-color);
        }

        .input-group input::placeholder {
            color: #999;
        }

        .input-group.input-error input {
            border-color: var(--error-color);
            background-color: #ffeeed;
        }

        .input-group.input-error i {
            color: var(--error-color);
        }

        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            color: #777;
            font-size: 1.2rem;
            z-index: 2;
            transition: var(--transition);
        }

        .password-toggle:hover {
            color: var(--primary-color);
        }

        .email-check-status {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1rem;
            z-index: 2;
        }

        .checking {
            color: #3498db;
        }

        .available {
            color: var(--success-color);
        }

        .unavailable {
            color: var(--error-color);
        }

        .input-help {
            margin-top: 4px;
            font-size: 0.8rem;
            color: #777;
            padding-left: 5px;
        }

        .password-strength {
            display: flex;
            gap: 3px;
            margin-top: 8px;
            height: 5px;
        }

        .password-strength span {
            flex: 1;
            border-radius: 3px;
            background-color: #e0e0e0;
            transition: background-color 0.3s;
        }

        .flex-options {
            display: flex;
            justify-content: space-between;
            margin: 25px 0;
            font-size: 0.9rem;
        }

        .option-link {
            color: var(--primary-color);
            text-decoration: none;
            transition: var(--transition);
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .option-link:hover {
            color: var(--accent-color);
            text-decoration: underline;
        }

        .btn-register {
            display: block;
            width: 100%;
            height: 56px;
            background: linear-gradient(to right, var(--accent-color), var(--primary-color));
            color: white;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 12px;
            cursor: pointer;
            transition: var(--transition);
            box-shadow: 0 4px 15px rgba(67, 97, 238, 0.4);
            letter-spacing: 0.5px;
            position: relative;
            overflow: hidden;
        }

        .btn-register:hover {
            background: linear-gradient(to right, var(--primary-color), var(--accent-color));
            transform: translateY(-2px);
            box-shadow: 0 7px 20px rgba(67, 97, 238, 0.6);
        }

        .btn-register:active {
            transform: translateY(0);
        }

        .btn-register::after {
            content: "";
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(
                    90deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent
            );
            transition: 0.5s;
        }

        .btn-register:hover::after {
            left: 100%;
        }

        .btn-register:disabled {
            background: #cccccc;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
        }

        .card-footer {
            text-align: center;
            padding: 20px 0;
            font-size: 0.9rem;
            color: #777;
            border-top: 1px solid #eee;
            margin: 0 30px;
        }

        @keyframes cardEntrance {
            0% {
                opacity: 0;
                transform: translateY(30px) scale(0.96);
            }
            100% {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .success-message {
            position: fixed;
            top: 30px;
            right: 30px;
            background: var(--success-color);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            transform: translateX(100%);
            transition: var(--transition);
            z-index: 1000;
        }

        .success-message.show {
            opacity: 1;
            transform: translateX(0);
        }

        .toast-message {
            position: fixed;
            top: 30px;
            left: 50%;
            transform: translateX(-50%) translateY(-30px);
            background: var(--error-color);
            color: white;
            padding: 15px 25px;
            border-radius: 10px;
            box-shadow: var(--shadow);
            display: flex;
            align-items: center;
            gap: 12px;
            opacity: 0;
            transition: var(--transition);
            z-index: 1000;
            max-width: 90%;
            text-align: center;
        }

        .toast-message.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .toast-message.success {
            background: var(--success-color);
        }

        .toast-message.warning {
            background: var(--warning-color);
        }

        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
        }

        .loading-overlay.visible {
            opacity: 1;
            pointer-events: auto;
        }

        .loading-spinner {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 5px solid rgba(255, 255, 255, 0.3);
            border-top-color: var(--primary-color);
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        @media (max-width: 600px) {
            body {
                padding: 15px;
            }

            .register-card {
                max-width: 100%;
            }

            .card-header {
                padding: 25px 15px 30px;
            }

            .card-header h1 {
                font-size: 1.9rem;
            }

            .card-body {
                padding: 20px 15px 15px;
            }

            .toast-message {
                top: 15px;
                width: calc(100% - 30px);
            }
        }
    </style>
</head>
<body>
<div class="register-card">
    <div class="card-header">
        <h1>创建新账号</h1>
        <p>加入我们的智能小区管理系统</p>
    </div>

    <div class="card-body">
        <form id="registerForm">
            <div class="input-grid">
                <div class="input-group" id="mobileGroup">
                    <i class="fas fa-phone" style="top: 38%"></i>
                    <input type="tel" id="mobile" name="mobile" placeholder="请输入手机号" maxlength="11" required>
                    <div class="input-help">例如：13800138000</div>
                </div>

                <div class="input-group" id="usernameGroup">
                    <i class="fas fa-user" style="top: 38%"></i>
                    <input type="text" id="username" name="username" placeholder="请输入用户名" maxlength="20" required>
                    <div class="username-check-status"></div> <!-- 新增 -->
                    <div class="input-help">4-20位字母、数字或下划线</div>
                </div>

                <div class="input-group full-width email-check" id="emailGroup">
                    <i class="fas fa-envelope"></i>
                    <input type="email" id="email" name="email" placeholder="请输入电子邮箱" maxlength="50" required>
                    <div class="email-check-status"></div>
                </div>

                <div class="input-group" id="passwordGroup">
                    <i class="fas fa-lock" style="top: 38%"></i>
                    <input type="password" id="password" name="password" placeholder="设置密码" maxlength="20" required>
                    <span class="password-toggle" id="passwordToggle" style="left: 160px;top: 30px">
                        <i class="fas fa-eye"></i>
                    </span>
                    <div class="password-strength">
                        <span></span>
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>

                <div class="input-group" id="confirmPasswordGroup">
                    <i class="fas fa-lock"></i>
                    <input type="password" id="confirmPassword" name="confirmPassword" placeholder="确认密码" maxlength="20" required>
                    <span class="password-toggle" id="confirmPasswordToggle" style="left: 160px">
                        <i class="fas fa-eye"></i>
                    </span>
                </div>
            </div>

            <div class="flex-options">
                <a href="login.html" class="option-link">
                    <i class="fas fa-user"></i> 已有账号？立即登录
                </a>
                <a href="page/forget.html" class="option-link">
                    <i class="fas fa-question-circle"></i> 忘记密码?
                </a>
            </div>

            <button type="submit" class="btn-register" id="registerBtn">
                <span id="btnText"><i class="fas fa-user-plus"></i> 立即注册</span>
                <span id="btnLoader" class="hidden"><i class="fas fa-spinner fa-spin"></i> 注册中...</span>
            </button>
        </form>
    </div>

    <div class="card-footer">
        <p>© 2023 智能小区管理系统. 保留所有权利</p>
    </div>
</div>

<div class="success-message">
    <i class="fas fa-check-circle fa-2x"></i>
    <div>
        <h3>注册成功！</h3>
        <p>正在跳转到登录页面...</p>
    </div>
</div>

<div class="toast-message">
    <i class="fas fa-exclamation-circle"></i>
    <span id="toastText">这是一个错误提示</span>
</div>

<div class="loading-overlay" id="loadingOverlay">
    <div class="loading-spinner"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    $(document).ready(function() {
        // 元素缓存 - 修复变量定义
        const $mobileInput = $('#mobile');
        const $usernameInput = $('#username');
        const $emailInput = $('#email');
        const $passwordInput = $('#password');
        const $confirmPasswordInput = $('#confirmPassword');
        const $passwordToggle = $('#passwordToggle');
        const $confirmPasswordToggle = $('#confirmPasswordToggle');
        const $strengthSpans = $('.password-strength span');
        const $registerForm = $('#registerForm');
        const $registerBtn = $('#registerBtn');
        const $btnText = $('#btnText'); // 修复变量定义
        const $btnLoader = $('#btnLoader'); // 修复变量定义
        const $emailCheckStatus = $('.email-check-status');
        const $usernameCheckStatus = $('.username-check-status');
        const $toastMessage = $('.toast-message');
        const $toastText = $('#toastText');
        const $successMessage = $('.success-message');
        const $loadingOverlay = $('#loadingOverlay');
        // 用户名输入框变化时重置状态
        $usernameInput.on('input', function() {
            usernameChecked = false;
            usernameAvailable = false;
            $usernameCheckStatus.text('').removeClass('available').removeClass('unavailable');
            $('#usernameGroup').removeClass('input-error');
        });

// 用户名输入框失焦时检查用户名
        $usernameInput.on('blur', function() {
            const username = $usernameInput.val().trim();
            if (username && /^[a-zA-Z0-9_]{4,20}$/.test(username)) {
                checkUsernameAvailability(username);
            }
        });
        let usernameChecked = false;
        let usernameAvailable = false;

        function checkUsernameAvailability(username) {
            // 显示加载状态
            $usernameCheckStatus.html('<i class="fas fa-spinner fa-spin"></i>');
            $usernameCheckStatus.addClass('checking');

            // 发送 AJAX 请求检查用户名
            $.ajax({
                url: "user/queryByUsername", // 替换为你的实际接口地址
                type: "POST",
                data: { username: username },
                dataType: "json",
                success: function(res) {
                    usernameChecked = true;
                    $usernameCheckStatus.removeClass('checking');

                    if (res.code === 0 && res.data) {
                        // 用户名已存在
                        usernameAvailable = false;
                        $usernameCheckStatus.html('<i class="fas fa-times-circle"></i>');
                        $usernameCheckStatus.addClass('unavailable');
                        $('#usernameGroup').addClass('input-error');
                        showToast('该用户名已被注册');
                    } else {
                        // 用户名可用
                        usernameAvailable = true;
                        $usernameCheckStatus.html('<i class="fas fa-check-circle"></i>');
                        $usernameCheckStatus.addClass('available');
                        $('#usernameGroup').removeClass('input-error');
                        showToast('用户名可用', 'success');
                    }
                },
                error: function() {
                    $usernameCheckStatus.removeClass('checking');
                    $usernameCheckStatus.html('<i class="fas fa-exclamation-triangle"></i>');
                    $usernameCheckStatus.addClass('unavailable');
                    showToast('用户名检查失败，请重试', 'warning');
                }
            });
        }


        // 邮箱检查状态变量
        let emailChecked = false;
        let emailAvailable = false;

        // 输入框聚焦效果
        $('.input-group input').each(function() {
            const $this = $(this);
            const $group = $this.closest('.input-group');

            $this.on('focus', function() {
                $group.addClass('focused');
            }).on('blur', function() {
                $group.removeClass('focused');
            });
        });



        // 密码显示/隐藏功能
        $passwordToggle.on('click', function() {
            const newType = $passwordInput.attr('type') === 'password' ? 'text' : 'password';
            const newIcon = newType === 'text' ? 'fa-eye-slash' : 'fa-eye';

            $passwordInput.attr('type', newType);
            $passwordToggle.find('i').removeClass('fa-eye fa-eye-slash').addClass(newIcon);
        });

        $confirmPasswordToggle.on('click', function() {
            const newType = $confirmPasswordInput.attr('type') === 'password' ? 'text' : 'password';
            const newIcon = newType === 'text' ? 'fa-eye-slash' : 'fa-eye';

            $confirmPasswordInput.attr('type', newType);
            $confirmPasswordToggle.find('i').removeClass('fa-eye fa-eye-slash').addClass(newIcon);
        });

        // 密码强度实时检测
        $passwordInput.on('input', function() {
            const password = $passwordInput.val();
            let strength = 0;

            // 长度检查
            if (password.length >= 8) strength++;
            // 大写字母检查
            if (/[A-Z]/.test(password)) strength++;
            // 数字检查
            if (/[0-9]/.test(password)) strength++;
            // 特殊字符检查
            if (/[^A-Za-z0-9]/.test(password)) strength++;

            // 更新UI
            updateStrengthIndicator(strength);
        });

        // 更新密码强度指示器
        function updateStrengthIndicator(strength) {
            $strengthSpans.each(function(index) {
                if (index < strength) {
                    // 基于强度设置不同颜色
                    $(this).css('backgroundColor',
                        strength < 2 ? '#e74c3c' :
                            strength < 4 ? '#f39c12' : '#2ecc71');
                } else {
                    $(this).css('backgroundColor', '#e0e0e0');
                }
            });
        }

        // 邮箱输入框变化时重置状态
        $emailInput.on('input', function() {
            emailChecked = false;
            emailAvailable = false;
            $emailCheckStatus.text('').removeClass('available').removeClass('unavailable');
            $('#emailGroup').removeClass('input-error');
        });

        // 邮箱输入框失焦时检查邮箱
        $emailInput.on('blur', function() {
            const email = $emailInput.val().trim();
            if (email && /^\S+@\S+\.\S+$/.test(email)) {
                checkEmailAvailability(email);
            }
        });

        // 检查邮箱唯一性
        function checkEmailAvailability(email) {
            // 显示加载状态
            $emailCheckStatus.html('<i class="fas fa-spinner fa-spin"></i>');
            $emailCheckStatus.addClass('checking');

            // 发送AJAX请求检查邮箱
            $.ajax({
                url: "/user/queryByEmail",
                type: "POST",
                data: { email: email },
                dataType: "json",
                success: function(res) {
                    emailChecked = true;
                    $emailCheckStatus.removeClass('checking');

                    if (res.code === 0 && res.data) {
                        // 邮箱已存在

                        emailAvailable = false;
                        $emailCheckStatus.html('<i class="fas fa-times-circle"></i>');
                        $emailCheckStatus.addClass('unavailable');
                        $('#emailGroup').addClass('input-error');
                        showToast('该邮箱地址已被注册');
                    } else {
                        // 邮箱可用
                        emailAvailable = true;
                        $emailCheckStatus.html('<i class="fas fa-check-circle"></i>');
                        $emailCheckStatus.addClass('available');
                        $('#emailGroup').removeClass('input-error');
                        showToast('邮箱可用', 'success');
                    }
                },
                error: function() {
                    $emailCheckStatus.removeClass('checking');
                    $emailCheckStatus.html('<i class="fas fa-exclamation-triangle"></i>');
                    $emailCheckStatus.addClass('unavailable');
                    showToast('邮箱检查失败，请重试', 'warning');
                }
            });
        }

        // 显示提示消息
        function showToast(message, type = 'error') {
            $toastMessage.removeClass('success warning').removeClass('show');

            if (type === 'success') {
                $toastMessage.addClass('success');
            } else if (type === 'warning') {
                $toastMessage.addClass('warning');
            }

            $toastText.text(message);
            $toastMessage.addClass('show');

            setTimeout(() => {
                $toastMessage.removeClass('show');
            }, 3000);
        }

        // 表单提交处理
        $registerForm.on('submit', function(e) {
            e.preventDefault();

            const mobile = $mobileInput.val().trim();
            const username = $usernameInput.val().trim();
            const email = $emailInput.val().trim();
            const password = $passwordInput.val();
            const confirmPassword = $confirmPasswordInput.val();

            // 表单验证
            let isValid = true;

            // 手机号验证
            if (!/^1[3-9]\d{9}$/.test(mobile)) {
                showToast('请输入有效的手机号码');
                $('#mobileGroup').addClass('input-error');
                $mobileInput.focus();
                isValid = false;
            } else {
                $('#mobileGroup').removeClass('input-error');
            }

// 用户名验证
            if (username.length < 4 || username.length > 20 || !/^[a-zA-Z0-9_]+$/.test(username)) {
                showToast('用户名应为4-20位字母、数字或下划线');
                $('#usernameGroup').addClass('input-error');
                if (isValid) $usernameInput.focus();
                isValid = false;
            } else if (!usernameChecked) {
                showToast('请先检查用户名是否可用');
                $('#usernameGroup').addClass('input-error');
                if (isValid) $usernameInput.focus();
                isValid = false;
            } else if (!usernameAvailable) {
                showToast('该用户名已被注册');
                $('#usernameGroup').addClass('input-error');
                if (isValid) $usernameInput.focus();
                isValid = false;
            } else {
                $('#usernameGroup').removeClass('input-error');
            }
            // 邮箱验证
            if (!/^\S+@\S+\.\S+$/.test(email)) {
                showToast('请输入有效的电子邮箱地址');
                $('#emailGroup').addClass('input-error');
                if (isValid) $emailInput.focus();
                isValid = false;
            } else if (!emailChecked) {
                showToast('请先检查邮箱是否可用');
                $('#emailGroup').addClass('input-error');
                if (isValid) $emailInput.focus();
                isValid = false;
            } else if (!emailAvailable) {
                showToast('该邮箱地址已被注册');
                $('#emailGroup').addClass('input-error');
                if (isValid) $emailInput.focus();
                isValid = false;
            } else {
                $('#emailGroup').removeClass('input-error');
            }

            // 密码验证
            if (password.length < 8) {
                showToast('密码长度至少为8个字符');
                $('#passwordGroup').addClass('input-error');
                if (isValid) $passwordInput.focus();
                isValid = false;
            } else {
                $('#passwordGroup').removeClass('input-error');
            }

            // 确认密码验证
            if (password !== confirmPassword) {
                showToast('两次输入的密码不一致');
                $('#confirmPasswordGroup').addClass('input-error');
                if (isValid) $confirmPasswordInput.focus();
                isValid = false;
            } else {
                $('#confirmPasswordGroup').removeClass('input-error');
            }

            if (!isValid) return false;

            // 验证通过，显示加载状态
            showLoading(true);

            // 发送注册请求
            $.ajax({
                url: "/user/register",
                type: "POST",
                data: {
                    mobile: mobile,
                    username: username,
                    email: email,
                    password: password
                },
                dataType: "json",
                success: function(res) {
                    if (res.code === 0) {
                        // 注册成功
                        $successMessage.addClass('show');

                        // 2秒后跳转
                        setTimeout(() => {
                            window.location.href = 'login.html';
                        }, 2000);
                    } else {
                        showToast(res.msg || '注册失败');
                    }
                },
                error: function() {
                    showToast('网络错误，请稍后重试');
                },
                complete: function() {
                    showLoading(false);
                }
            });
        });

        // 加载状态控制
        function showLoading(visible) {
            $loadingOverlay.toggleClass('visible', visible);
            $btnText.toggle(!visible);
            $btnLoader.toggleClass('hidden', !visible);
            $registerBtn.prop('disabled', visible);
        }
    });
</script>
</body>
</html>